<template>
	<div class="content-box">
		<div v-if="loadCover">
			<div class="tabs ">
				<div class="tab__top--div PingFangSC-Semibold flex justify-between pl-30 pr-30">
					<div class="item" v-for="(item, i) in typeList" :key="i" @click="tabClick(item, i)"
						v-if="item.userType.includes(userInfo.userType)">

						<div :class="{ 'curr': item.label == tabName, 'font-bold': brandModel == '三星' }">
							{{ item.label
							}}</div>

					</div>
				</div>
			</div>
			<div class="listBox ml-20 mr-20 pt-100">
				<div v-for="(item, index) in list" :key="index" class="bg-fff p-24 bor-r16 mt-20"
					@click="goDetail(item)">
					<div class="flex-center color-3 fontS28 bor-b lh-34 pb-20 font-bold">
						<div v-if="item.orderStatus === 1">待付款</div>
						<div v-if="item.orderStatus === 2">待签约</div>
						<div v-if="item.orderStatus === 3">已取消</div>
						<div v-if="item.orderStatus === 4 && userInfo.userType === '03'">已签约</div>
						<div v-if="item.orderStatus === 4 && userInfo.userType === '02'">待开始</div>
						<div v-if="item.orderStatus === 5">服务中</div>
						<div v-if="item.orderStatus === 6">退款中</div>
						<div v-if="item.orderStatus === 7">已完成</div>
						<div v-if="item.orderStatus === 8">已退款</div>
						<div class="ml-auto color-9 " style="font-weight: normal!important;">{{ item.createTime }}</div>
					</div>
					<div class="flex mt-16 ">
						<image class="orderImg" :src="baseUrl + item.carouselImageUrls" mode="asspectFill" />
						<div class="ml-20 pos-rel" style="width: calc(100% - 390upx);">
							<div class="fontE2 color-3 fontS32 lh-42">{{ item.serveName }}</div>
							<div class="flex priceBottom">
								<div class="flex-center align-baseline"
									v-if="item.priceType === 'fix' || item.priceType === 'tutor'">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										item.actualPrice }}
									</div>
									<div class="fontS22 color-9 text-decoration-through ml-10"
										v-if="item.priceType !== 'tutor'">¥{{
											item.totalPrice }}
									</div>
								</div>
								<div class="flex-center align-baseline" v-if="item.priceType === 'periodic'">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										item.actualPrice }}
									</div>
									<div class="fontS22 color-9  ml-10"> 元/人/月
									</div>
								</div>
								<div class="flex-center align-baseline"
									v-if="item.priceType === 'unfix' && item.actualPrice === 0">
									<div class="color-red fontS32">??</div>
									<div class="fontS22 color-9  ml-10"> 咨询客服改价
									</div>
								</div>
								<div class="flex-center align-baseline"
									v-if="item.priceType === 'unfix' && item.actualPrice > 0">
									<div class="color-red fontS32">{{ item.actualPrice }}</div>

								</div>
							</div>
						</div>
						<div class="ml-auto lh-172 fontS32">x{{ item.serveNum }}</div>

					</div>
				</div>
				<div class="lh-120 text-center fontS28 color-6d" v-if="loadList">正在加载中...</div>
				<div class="lh-120 text-center fontS28 color-6d" v-if="!noteFlag && !loadNo && !loadList">没有更多数据</div>
				<without v-if="loadNo"></without>
			</div>
		</div>
	</div>

</template>
<script>
import { myOrderList } from '@/api/order'


export default {
	data() {
		return {
			baseUrl: getApp().globalData.baseUrl,
			loadCover: false,
			tabIndex: 0,
			tabName: '全部',
			typeList: [{
				value: '',
				label: '全部',
				userType: ['02', '03']
			},
			{
				value: 1,
				label: '待付款',
				userType: ['02', '03']

			},
			{
				value: 4,
				label: '待开始',
				userType: ['02']

			},
			{
				value: 2,
				label: '待签约',
				userType: ['03']
			},
			{
				value: 4,
				label: '已签约',
				userType: ['03']
			},
			{
				value: 5,
				label: '服务中',
				userType: ['02', '03']
			},
			{
				value: 6,
				label: '退款中',
				userType: ['02']
			},
			{
				value: 99,
				label: '其他',
				userType: ['02', '03']
			}
			],
			queryForm: {
				channel: 1,
				pageNum: 1,
				pageSize: 10,
				userId: '',
				userType: '',
				orderStatus: ''
			},
			list: [],
			noteFlag: true,
			loadList: false,
			loadNo: false
		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},
	},

	async onLoad(opt) {
		if (opt.typeName) {
			this.tabName = opt.typeName
			this.queryForm.orderStatus = opt.tabIndex
		}
		this.queryForm.userId = this.userInfo.userId
		this.queryForm.userType = this.userInfo.userType

	},
	onPullDownRefresh() {

		this.loadList = true
		this.queryForm.pageNum = 1;
		if (this.noteFlag) {
			this.getList();
		} else {
			this.loadList = false
		}
		uni.stopPullDownRefresh()
	},
	async onShow() {
		await this.getList()
	},

	onReachBottom() {
		this.loadList = true
		this.queryForm.pageNum++;
		if (this.noteFlag) {
			this.getList();
		} else {
			this.loadList = false
		}
	},
	methods: {
		async getList() {
			this.noteFlag = true
			this.loadNo = false
			this.loadList = false
			const { rows } = await myOrderList(this.queryForm)
			if (rows.length < this.queryForm.pageSize) {
				this.noteFlag = false
			}
			if (this.queryForm.pageNum === 1) {
				this.list = rows
			} else {
				this.list = [...this.list, ...rows]
			}
			this.loadCover = true

			if (this.queryForm.pageNum === 1 && this.list.length < 1) {
				this.loadNo = true
			}
		},
		async getLogin() {
			const { data } = await api.checkLogin.checkLogin()
			this.loginStatus = data.loginStatus
		},
		cancelOrder(item) {


			uni.showModal({
				content: '是否确定取消订单？',
				success: res => {
					if (res.confirm) {
						cancelOrderNew({ orderId: item.orderNo }).then(res => {
							this.getData();
						})
					}
				},
				fail: () => { },
				complete: () => { }
			});


		},

		goDetail(item) {
			uni.navigateTo({
				url: '/pages/order/detail?orderId=' + item.id
			})
		},
		tabClick(item, index) {

			this.tabIndex = index
			this.tabName = item.label
			this.queryForm.orderStatus = item.value
			this.queryForm.pageNum = 1
			this.getList()

		},
	}
};
</script>
<style lang="less" scoped>
@import url(order.less);
</style>
